<template>
    <div>
        <el-table v-loading="loading" :data="list.list" border stripe>
            <el-table-column label="ID" prop="uid" width="80px"></el-table-column>
            <el-table-column label="ئىسمى">
                <template slot-scope="{row}">
                    <span>{{row.userInfo.nickName}}</span>
                </template>
            </el-table-column>
            <el-table-column label="رەسىمى">
                <template slot-scope="{row}">
                    <el-image lazy :src="row.userInfo.avatarUrl"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="openId">
                <template slot-scope="{row}">
                    <span>{{row.userInfo.openId}}</span>
                </template>
            </el-table-column>
            <el-table-column label="زاكاس نومۇرى" prop="orderId"></el-table-column>
            <el-table-column label="تاپشۇرغان پۇلى" prop="orderId">
                <template slot-scope="{row}">
                    {{Math.round(row.money/100)}}￥
                </template>
            </el-table-column>
            <el-table-column label="باشلىغان ۋاقتى" prop="startTime">
                <template slot-scope="{row}">
                    <span>{{moment(Number(row.startTime)).format('YYYY-MM-DD HH:mm:ss')}}</span>
                </template>
            </el-table-column>
            <el-table-column label="توشىدىغان ۋاقتى" prop="endTime">
                <template slot-scope="{row}">
                    <span>{{moment(Number(row.endTime)).format('YYYY-MM-DD HH:mm:ss')}}</span>
                </template>
            </el-table-column>
        </el-table>
        <el-row type="flex" justify="center" style="margin:15px 0;">
            <el-col :span="8"></el-col>
            <el-col :span="8">
                <el-pagination background layout="prev, pager, next" :total="list.total" :page-size="pageSize" @current-change="handleCurrentChange">
                </el-pagination>
            </el-col>
            <el-col :span="8"></el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            moment,
            pageNo: 1,
            pageSize: 20,
            list: {
                list: [],
                total: 0
            },
            loading: false
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        async getList() {
            try {
                this.loading = true;
                let res = await this.$http.get(
                    `/getVip?currentPage=${this.pageNo}&pageSize=${this.pageSize}`
                );
                let list = res.data.data;
                list.list = list.list.map(item => {
                    let opt = {
                        ...item,
                        userInfo: JSON.parse(item.user_info)
                    };
                    return opt;
                });
                this.list = list;
                this.loading = false;
            } catch (error) {}
        },
        handleCurrentChange(page) {
            this.pageNo = page;
            this.getList();
        }
    }
};
</script>

<style lang="scss" scoped>
</style>